<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="form-inline">
        <el-form-item label="">
          <el-input
            v-model="listQuery.keyword"
            placeholder="请输入关键词"
            clearable
            size="medium"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="handleFilter"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            size="medium"
            @click="handleAdd()"
            >新增</el-button
          >
        </el-form-item>
        <!-- <el-form-item>
          <el-button v-waves type="warning" icon="el-icon-refresh" size="small" @click="handleFilterClear">重置</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
    >
      <el-table-column prop="title" label="菜单名称" align="left" width="180">
      </el-table-column>
      <el-table-column prop="name" label="唯一标识" align="center" width="300">
      </el-table-column>
      <el-table-column label="类型" align="center" width="300">
        <template slot-scope="scope">
          <el-tag size="medium" type="success">{{ scope.row.level | filterLevel }}</el-tag>
      </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="handleEdit(row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="handleDelete(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ListMixin from "@/mixin/list";
import { listMenu } from "@/api/menu";
// import { getUrl } from "@/utils/url";

export default {
  mixins: [ListMixin],
  data() {
    return {};
  },
  filters: {
    filterLevel(value) {
      let result = ''
      switch(value) {
        case 1:
          result = '一级菜单';
          break;
        case 2:
          result = '二级菜单';
          break;
        case 3:
          result = '三级菜单';
          break;
        case 4:
          result = '按钮';
          break;
      }
      return result
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      this.listQuery = {
        ...this.listQuery,
        model: "all",
        pid: tree.id,
      };
      listMenu(this.listQuery).then((response) => {
        resolve(response.data);
      });
    },
    // 列表
    fetchData() {
      this.listLoading = true;
      this.listQuery = {
        ...this.listQuery,
        model: "all",
        pid: 0,
      };
      listMenu(this.listQuery).then((response) => {
        this.tableData = response.data;
        this.listLoading = false;
      });
    },
    // 新增
    handleAdd() {
      this.$router.push("/auth/menu/add");
    },
    // 编辑
    handleEdit(id) {
      this.$router.push({
        name: "MenuEdit",
        params: {
          id: id,
        },
      });
    },
    // 删除
    deleteData(id) {
      //   deleteRole(id).then(response => {
      //     if (response.code == 1) {
      //       this.$notify({
      //         title: response.message,
      //         message: response.message,
      //         type: response.code == 1 ? "success" : "error",
      //         duration: 2000,
      //       })
      //       this.fetchData()
      //     }
      //   })
    },
  },
};
</script>

<style>
</style>